<template>
	<div class="select-container">
		<input class="input" @tap="changeActive" type="text" :disabled="!filterable" v-model="myvalue" @input="handleInput" :placeholder="placeholderStr ? placeholderStr : placeholder" @blur="onBlur"
			@focus="onFocus" />
		<div class="dropdown" v-if="showDropdown">
			<div class="item" :class="active === index ? 'itemActive' : ''" v-for="(option, index) in selectOptions" :key="option.value" @click="handleSelect(option.value, index,option)">{{ option.label }}
			</div>
			<div class="no-data" v-if="selectOptions.length === 0">无数据</div>
		</div>
		<image class="jiantou" :class="showDropdown ? 'jtactive' : ''" :src="require('./jiantou.png')" mode="" @tap.stop=""></image>
		<image class="close" v-if="clearable && (placeholderStr || inputValue)" :src="require('./close.png')" mode="" @tap.stop="onClose"></image>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				showDropdown: false,
				selectOptions: [],
				placeholderStr: '',
				active: null,
				myvalue: ''
			};
		},
		props: {
			inputValue: {
				type: String,
				default: ''
			},
			options: {
				type: Array,
				default: () => []
			},
			clearable: {
				type: Boolean,
				default: false
			},
			filterable: {
				type: Boolean,
				default: false
			},
			placeholder: {
				type: String,
				default: '请选择关键字'
			}
		},
		mounted() {
			this.selectOptions = [...this.options]
		},
		methods: {
			handleInput() {
				const keyword = this.myvalue;
				// 根据关键词进行筛选数据
				const filteredOptions = this.options.filter(item => item.value.includes(keyword));
				this.showDropdown = true;
				this.selectOptions = filteredOptions;
				
			},
			handleSelect(option, index,val) {
				
				this.myvalue = option;
				this.$emit('update:inputValue', option)
				
				this.$emit('sendDate', val)
				this.active = index
				this.showDropdown = false;
				console.log(option, index);
			},
			onBlur() {
				if (this.placeholderStr) {
					this.myvalue = this.placeholderStr
					this.$emit('update:inputValue', this.placeholderStr)
				}
				
				
				this.selectOptions = [...this.options]
				setTimeout(() => {
					this.showDropdown = false;
					
				}, 200)
				
				
			},
			onFocus() {
				if (this.myvalue) {
					this.placeholderStr = this.myvalue
					this.myvalue = ''
					this.$emit('update:inputValue', '')
					
				}
				this.selectOptions = [...this.options]
				if (this.placeholderStr || this.myvalue) {
					this.selectOptions.forEach((item, index) => {
						if (item.value == this.placeholderStr || item.value == this.myvalue) {
							this.active = index
							return
						}
					})
				}
				
				this.showDropdown = true;
			},
			onClose() {
				this.placeholderStr = ''
				this.myvalue = ''
				this.$emit('update:inputValue', '')
				this.active = null
				this.selectOptions = [...this.options]
				this.showDropdown = false;
			},
			changeActive() {
				if (this.filterable) return
				this.showDropdown = true
			}
		},
	};
</script>

<style scoped>
	.select-container {
		  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 140rpx;
	}
	.select-container > image {
		width: 32rpx;
		height: 32rpx;
		/* position: absolute; */
		/* right: 20rpx;
		top: 24rpx; */
		z-index: 10;
		/* border-radius: 30rpx; */
	}

	.input {
		min-width: 90rpx;
		/* width: calc(100% - 40rpx - 2px);
		height: calc(100% - 30rpx - 2px); */
		/* padding: 15rpx 20rpx; */
		/* border: 1px solid #ccc; */
		/* border-radius: 8rpx; */
		font-size: 28rpx;
		color: #333;
	}

	.dropdown {
		position: absolute;
		top: 56rpx;
		left: 0;
		right: -50px;
		/* width: calc(100% - 2px); */
		max-height: 400rpx;
		overflow-y: auto;
		/* border: 1px solid #ccc; */
		border-top: none;
		font-size: 28rpx;
		color: #333;
	background: red;
		box-shadow: 0rpx 24rpx 48rpx 0rpx rgba(0,0,0,0.12);
		border-radius: 10rpx 10rpx 10rpx 
	}

	.item {
		padding: 20rpx;
		background-color: #fff;
		cursor: pointer;
	}

	.no-data {
		padding: 20rpx;
		text-align: center;
		color: #999;
	}
	.select-container > .jiantou {
		transition: 1s;
		position: absolute;
		right: 0;
	}
	.jtactive {
		transform: rotate(-180deg);
	}
	.itemActive {
		color: #409eff;
		font-weight: 700;
	}
</style>
